<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>增加商品</title>
    <!-- title -->
    <% include ../public/page_title.html%>
    <link rel="stylesheet" href="/public/admin/lib/froalaEditor/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/public/admin/lib/froalaEditor/css/froala_editor.pkgd.min.css"/>
    <link rel="stylesheet" href="/public/admin/lib/froalaEditor/css/froala_style.min.css"/>
    <link rel="stylesheet" href="/public/admin/lib/zTree/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="/public/admin/lib/diyUpload/css/webuploader.css">
    <link rel="stylesheet" href="/public/admin/lib/diyUpload/css/diyUpload.css">
    <style>
        .layui-tab-item{
            position: static;
            min-height:400px;
        }
        .layui-form-select dl { max-height:200px; }
        .layui-form-item .layui-input-inline{
            width:40%;
        }
        /* #batchIUpload{
            width:120px;
            margin:20px auto;
        } */
        #batchIUpload div:nth-child(2){
            width:120px !important;
            height:42px !important;
        }   
    </style>
</head>
<body class="main_body">
    <fieldset class="layui-elem-field" style="margin:10px;">
        <legend>增加商品</legend>
        <div class="layui-field-box">
            <form class="layui-form">
                <div class="layui-tab">
                    <ul class="layui-tab-title">
                        <li class="layui-this">通用信息</li>
                        <li>详细描述</li>
                        <li>其他信息</li>
                        <li>规格与包装</li>
                        <li>商品相册</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-row">
                                <div class="layui-col-md9">
                                    <div style='padding:15px 0;'>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品标题</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" lay-verify="title" autocomplete="off" class="layui-input" placeholder="输入商品标题">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">附属标题</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="sub_title" class="layui-input" placeholder="输入附属标题">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品版本</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="goods_version" class="layui-input" placeholder="输入商品版本">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">所属分类</label>
                                            <div class="layui-input-inline">
                                                <input type="hidden" id="cate_id" name="cate_id" class="layui-input">
                                                <input type="text" id="cate_name" name="cate_name" class="layui-input" placeholder="选择分类">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux">分类树选择</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品图片</label>
                                            <div class="layui-input-block">
                                                <button type="button" class="layui-btn" id="upload">
                                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                                </button>
                                            </div>
                                        </div>
                                        <div class="layui-form-item" id='imgBox'>
                                            <label class="layui-form-label">图片预览</label>
                                            <div class="layui-input-block" id='imgs'>
                                                
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品价格</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="shop_price" lay-verify="price" autocomplete="off" class="layui-input" placeholder="输入商品价格">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux">必须是数字</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品原价</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="market_price" lay-verify="old_price" autocomplete="off" class="layui-input" placeholder="输入商品原价">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux">必须是数字</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品排序</label>
                                            <div class="layui-input-inline">
                                                <input type="text" name="sort" lay-verify="sort" class="layui-input" placeholder="输入商品排序" value="1">
                                            </div>
                                            <div class="layui-form-mid layui-word-aux">必须是数字</div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品状态</label>
                                            <div class="layui-input-block">
                                                <input type="checkbox" checked name="status" lay-skin="switch" lay-text="显示|隐藏">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">加入推荐</label>
                                            <div class="layui-input-block">
                                                <input type="checkbox" name="is_best" title="精品" lay-skin="primary"/>
                                                <input type="checkbox" name="is_hot" title="热销" lay-skin="primary"/>
                                                <input type="checkbox" name="is_new" title="新品" lay-skin="primary"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div style='padding:15px 0;'>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">商品详细</label>
                                    <div class="layui-input-block">
                                        <textarea id="content" style="display: none;"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div style='padding:15px 0;'>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">商品颜色</label>
                                    <div class="layui-input-block">
                                        <%for(var i=0;i<colorList.length;i++){%>
                                            <input type="checkbox" value="<%-colorList[i]._id%>" name="goods_color[]" title="<%=colorList[i].color_name%>" lay-skin="primary">
                                        <%}%>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">关联商品</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="relation_goods" class="layui-input" placeholder="输入关联商品id">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">填写关联商品的id多个以英文逗号隔开 格式:23,24,39</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">关联赠品</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="goods_gift" class="layui-input" placeholder="输入关联赠品,默认空">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">可为空 格式:23-2,39-5 说明:例如23-2中的23表示商品id，2表示商品数量</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">关联配件</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="goods_fitting" class="layui-input" placeholder="输入关联配件,默认空">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">可为空 格式:23-2,39-5 说明:例如23-2中的23表示商品id，2表示商品数量</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">更多属性</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="goods_attrs" class="layui-input" placeholder="输入更多属性,默认空">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">格式:颜色:红色,白色,黄色|尺寸:41,42,43 [标点符号皆为英文号]</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">Seo关键词</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="goods_keywords" class="layui-input" placeholder="输入Seo关键词,默认空">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">Seo描述</label>
                                    <div class="layui-input-block">
                                        <textarea name="goods_desc" placeholder="输入Seo关键描述,默认空" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-row">
                                <div class="layui-col-md9">
                                    <div style='padding:15px 0;'>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">更多属性</label>
                                            <div class="layui-input-block">
                                                <select name="goods_type_id" lay-verify="goods_type_id" lay-filter="goods_type_id">
                                                    <option value="0">请选择商品类型</option>
                                                    <%for(var i=0;i<goodsTypes.length;i++){%>
                                                        <option value="<%=goodsTypes[i]._id%>"><%=goodsTypes[i].title%></option>
                                                    <%}%>
                                                </select>
                                            </div>
                                        </div>
                                        <div id="goods_type_attribute"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div style='padding:15px 0;'>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">批量上传</label>
                                            <div class="layui-input-block">
                                                <div id="batchIUpload"></div>
                                                <div id="photoList"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="addGoods">立即提交</button>
                        <a href="<%=adminName%>/goods" class="layui-btn layui-btn-primary">返回</a>
                    </div>
                </div>
            </form>
        </div>
    </fieldset>
    <div id="tree" class="ztree" style="display:none;padding:20px;"></div>
	<script src="/public/admin/layui/layui.js"></script>
    <script src="/public/admin/js/index.js"></script>
    <script src="/public/admin/lib/froalaEditor/js/jquery-1.10.1.js"></script>
    <script src="/public/admin/lib/zTree/js/jquery.ztree.all.min.js"></script>
    <script src="/public/admin/lib/froalaEditor/js/froala_editor.pkgd.min.js"></script>
    <script src="/public/admin/lib/froalaEditor/js/languages/zh_cn.js"></script>
    <script src="/public/admin/lib/diyUpload/js/webuploader.html5only.min.js"></script>
    <script src="/public/admin/lib/diyUpload/js/diyUpload.js"></script>
    <script>
        var AddGoods = {
            //分类树数据
            goodsCates:JSON.parse('<%-goodsCates%>'),
            //初始化
            init:function(){
                this.createText();
                this.layuiLoad();
                this.createTree();
                this.batchIUpload();
            },
            //生成树
            createTree:function(){
                this.zTreeObj = $.fn.zTree.init($("#tree"), {
                    data:{
                        simpleData:{
                            enable: true,
                            idKey:'_id',
                            pIdKey :'pid'
                        }
                    }
                }, this.goodsCates);
                this.zTreeObj.expandAll(true);
                this.initCate()
            },
            //初始化富文本
            createText:function(){
                var toolbar = [ 'bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '|', 'fontFamily', 'fontSize', 'color', 'inlineClass', 'inlineStyle', 'paragraphStyle', 'lineHeight', '|', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'outdent', 'indent', 'quote', '-', 'insertLink', 'insertImage', 'insertTable', '|', 'emoticons', 'fontAwesome', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', '|', 'print', 'getPDF',  'html']
                this.contentText = $('#content').froalaEditor({

                    height: 400,    //给编辑器设置默认的高度
                    language: 'zh_cn',
                    imageUploadURL:'<%=adminName%>/uploadImage?_csrf=<%=csrf%>',
                    //根据不同的分辨率加载不同的配置
                    toolbarButtons: toolbar,
                    toolbarButtonsMD: toolbar,
                    toolbarButtonsSM: toolbar
                });
            },
            //初始化layui布局
            layuiLoad:function(){
                var _this = this;
                layui.use(['form', 'upload', 'element', 'layer'], function() {
                    var form = layui.form,
                        layer=layui.layer,
                        element = layui.element,
                        upload = layui.upload;
                    
                    $('#imgBox').hide();
                    //表单验证
                    _this.verify(form);
                    _this.openCate()
                    //图片上传
                    _this.upload(upload,layer);
                    //改变商品类型
                    _this.changeGoodsType(form,layer);
                    //提交
                    _this.submit(form,layer)
                });
            },
            //批量文件上传
            batchIUpload:function(){
                $('#batchIUpload').diyUpload({
                    url:'<%=adminName%>/upload?_csrf=<%=csrf%>&jimp=true&size=800',
                    success:function( res ) {
                        console.info( res );
                        var file = res.data[0].file
                        $('#photoList').append('<input type="hidden" name="goods_image_list[]" value="'+file+'">');
                    },
                    error:function( err ) {
                        console.info( err );	
                    }
                });
            },
            //初始化默认分类
            initCate:function(){
                $('#cate_id').val(this.goodsCates[0]._id)
                $('#cate_name').val(this.goodsCates[0].title)
            },
            //分类列表
            changeCate:function(layer){
                var _this = this;
                var node = _this.zTreeObj.getNodeByParam("_id", $('#cate_id').val());
                _this.zTreeObj.selectNode(node);
                layer.open({
                    type: 1,
                    title: '商品分类',
                    maxmin: true,
                    area: ['300px', '400px'],
                    btn: ['确定', '取消'],
                    content: $('#tree'),
                    yes: function(index, layero){
                        var selectNode=_this.zTreeObj.getSelectedNodes();
                        console.log(selectNode)
                        if(selectNode.length>0){
                            $('#cate_id').val(selectNode[0]._id);
                            $('#cate_name').val(selectNode[0].title)
                        }else{
                            $('#cate_id').val(_this.goodsCates[0]._id)
                            $('#cate_name').val(_this.goodsCates[0].title)
                        }
                        layer.close(index)
                    }
                    ,btn2: function(index, layero){
                        return true
                    }
                });
            },
            //打开所属模块弹窗
            openCate:function(){
                var _this = this;
                $('#cate_name').focus(function(){
                    $('#cate_name').blur()
                    layui.use('layer', function() {
                        var layer = layui.layer;
                        _this.changeCate(layer);
                    })
                })
            },
            //表单验证
            verify:function(form){
                form.verify({
                    title: function(value){
                        if(value.length<1){
                            return '商品标题不能为空';
                        }
                    },
                    sub_title: function(value){
                        if(value.length<1){
                            return '附属标题不能为空';
                        }
                    },
                    price: function(value){
                        if(value.length<1){
                            return '价格不能为空';
                        }else if(isNaN(value)){
                            return '价格不能为非数字';
                        }
                    },
                    sort: function(value){
                        if(value.length<1){
                            return '排序不能为空';
                        }else if(isNaN(value)){
                            return '排序不能为非数字';
                        }
                    },
                    old_price: function(value){
                        if(value.length<1){
                            return '价格不能为空';
                        }else if(isNaN(value)){
                            return '价格不能为非数字';
                        }
                    }
                });
            },
            //图片上传
            upload:function(upload,layer){
                //上传图片
                var uploadInst = upload.render({
                    elem: '#upload', //绑定元素
                    url: "<%=adminName%>/upload?_csrf=<%=csrf%>&jimp=true&size=800", //上传接口
                    done: function(res){
                        //上传完毕回调
                        if(res.code===0){
                            layer.msg(res.msg);
                            $('#imgBox').show()
                            var html = '';
                            for(var i=0;i<res.data.length;i++){
                                html+='<img src="'+res.data[i]['file']+'" width="200" alt=""/><input type="hidden" name="goods_img" value="'+res.data[i]['file']+'">';
                            }
                            setTimeout(function(){
                                $('#imgs').html(html)
                                $('#imgs').find('img').on('click',function(){
                                    var src = $(this).attr('src');
                                    var h = $(this).height();
                                    var w = $(this).width();
                                    var area = '500px';
                                    if(h>w){
                                        area = '400px';
                                    }else if(h<w){
                                        area = '700px';
                                    }
                                    layer.open({
                                        area: area,
                                        title: '图片预览',
                                        content: '<img src="'+src+'" width="100%">',
                                    }); 
                                })
                            },1000)
                        }else{
                            layer.msg(res.msg);
                        }
                    },
                    error: function(){
                    //请求异常回调
                        layer.msg('请求出错');
                    }
                });
            },
            //改变商品类型
            changeGoodsType:function(form,layer){
                form.on('select(goods_type_id)', function(data){
                    var val = data.value;
                    console.log(data)
                    $.ajax({
                        type:'get',
                        data:{
                            id:val,
                            _csrf:'<%=csrf%>'
                        },
                        dataType:'json',
                        url:'<%=adminName%>/goods/goodsTypeAttribute',
                        success:function(res){
                            var data = res.data;
                            //goods_type_attribute
                            var html = "";
                            for(var i=0;i<data.length;i++){
                                html+='<div class="layui-form-item">';
                                html+='<label class="layui-form-label">'+data[i].title+'</label>';
                                html+='<div class="layui-input-block">';
                                if(data[i].attr_type==1){
                                    html+='<input type="hidden" name="attr_id_list[]" value="'+data[i]._id+'"/>';
                                    html+='<input class="layui-input" type="text" name="attr_value_list[]"/>';
                                }else if(data[i].attr_type==2){
                                    html+='<input type="hidden" name="attr_id_list[]" value="'+data[i]._id+'"/>';
                                    html+='<textarea name="attr_value_list[]" class="layui-textarea"></textarea>';
                                }else if(data[i].attr_type==3){
                                    var arr = data[i].attr_value.split(',');
                                    console.log(arr)
                                    html+='<input type="hidden" name="attr_id_list[]" value="'+data[i]._id+'"/>';
                                    html+='<select name="attr_value_list[]" lay-verify="attrtype_'+data[i]._id+'" lay-filter="attrtype_'+data[i]._id+'">';
                                        for(var j=0;j<arr.length;j++){
                                            html+='<option value="'+arr[j]+'">'+arr[j]+'</option>';
                                        }
                                    html+='</select>';
                                }
                                html+='</div>';
                                html+='</div>';     
                            }
                            $('#goods_type_attribute').html(html);
                            form.render();
                        },
                        error:function(err){
                            layer.msg('后台出错');
                        }
                    })
                });
            },
            submit:function(form,layer){
                //监听提交
                form.on('submit(addGoods)', function(data) {
                    data.field._csrf = "<%=csrf%>";
                    data.field.status = data.field.status?1:0;
                    data.field.is_best = data.field.is_best?1:0;
                    data.field.is_hot = data.field.is_hot?1:0;
                    data.field.is_new = data.field.is_new?1:0;
                    data.field.goods_content = $('#content').froalaEditor('html.get');
                    if(!data.field.goods_img){
                        data.field.goods_img = ""
                    }
                    if(data.field.goods_color){
                        data.field.goods_color=data.field.goods_color.join(',')
                    }
                    
                    console.log(data.field)
                    $.ajax({
                        type:'post',
                        data:data.field,
                        dataType:'json',
                        url:'<%=adminName%>/goods/doadd',
                        success:function(res){
                            console.log(res);
                            if(res.code===0){
                                layer.msg(res.msg);
                                setTimeout(function(){
                                    window.location.href = "<%=adminName%>/goods"
                                },500)
                            }else{
                                layer.msg(res.msg);
                            }
                        },
                        error:function(err){
                            layer.msg('后台出错');
                        }
                    })
                    return false;
                })
            },
        }
        //初始化
        AddGoods.init()
        
    </script>
</body>
</html>